<template>
  <el-dialog
    class="signaturepad-dialog"
    :visible.sync="dialogVisible"
    :title="title"
    append-to-body
    :before-close="handleClose"
    v-if="dialogVisible"
  >
    <div class="dialog-content">
      <!-- VueSignaturePad 组件 -->
      <VueSignaturePad
        :width="width"
        :height="height"
        :options="options"
        :images="images"
        :customStyle="customStyle"
        :scaleToDevicePixelRatio="scaleToDevicePixelRatio"
        ref="signaturePad"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleOk" :loading="uploading"
        >确定</el-button
      >
      <el-upload v-if="showButton('upload')" class="upload-image" action="" 
      :auto-upload="false" 
      accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
      :on-change="onUploadChange"
      :before-upload="beforeUpload" :show-file-list="false">
        <el-button type="primary">上传</el-button>
      </el-upload>
      <el-button v-if="showButton('lock')" type="primary" @click="lock" :disabled="isLock"
        >锁定</el-button
      >
      <el-button v-if="showButton('unlock')" type="primary" @click="unlock" :disabled="!isLock"
        >解锁</el-button
      >
      <el-button v-if="showButton('cancel')" type="primary" @click="undo">撤销</el-button>
      <el-button v-if="showButton('clear')" type="primary" @click="clear">清除</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    //是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
    //确认回调
    confirm: {
      type: Function,
      default: null,
    },
    //标题
    title: {
      type: String,
      default: "手写",
    },
  },
  data() {
    return {
      //宽度
      width: "60vw",
      //高度
      height: "50vh",
      //是否锁定
      isLock: false,
      //按钮显示
      buttons: window.HC_config.VUE_APP_SIGNATURE_DIALOG_BUTTONS || ['upload','lock','unlock','cancel','clear'],
      //上传中
      uploading: false,
      //画笔参数
      options: {
        minWidth: 2, // 画笔最小宽度
        maxWidth: 5, // 画笔最大宽度
        throttle: 16, // 画笔移动事件的时间间隔，单位为毫秒
        minDistance: 5, // 画笔移动的最小距离，单位为像素
        backgroundColor: "rgba(255, 255, 255, 0)", // 画布背景颜色
        penColor: "black", // 画笔颜色
        velocityFilterWeight: 0.7, // 画笔速度过滤器的权重
        onBegin: () => {}, // 开始签名时的回调函数
        onEnd: () => {}, // 结束签名时的回调函数
      },
      //图片列表
      images: [],
      //通用样式
      customStyle: {
        signatureCanvas: {
          border: "1px solid #ccc", // 画布边框
          borderRadius: "5px", // 画布圆角
        },
        signaturePad: {
          boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)", // 画笔阴影
        },
      },
      //元素尺寸以匹配设备像素比
      scaleToDevicePixelRatio: true,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    //显示按钮
    showButton(P_Button)
    {
      return this.buttons.includes(P_Button);
    },
    //上传之前钩子
    beforeUpload(P_File)
    {
      if(!P_File.type.includes("image")){
        this.$message.error("请上传图片");
        return false;
      }
      return true;
    },
    //弹窗关闭事假
    handleClose(done) {
      done();
    },
    //改变钩子
    onUploadChange(P_File)
    {
      let fileData = P_File.raw;
      const reader = new FileReader();
      reader.readAsDataURL(fileData);
      const that = this;
      reader.onload = function(event) {
          const base64 = event.target.result;
          that.$refs.signaturePad.fromDataURL(base64);
      };
    },
    // 保存签名
    async handleOk() 
    {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      if (isEmpty) 
      {
        this.$message.error("请完成签名");
        return;
      }
      if(this.confirm)
      {
        try {
          this.uploading = true;
          await this.confirm(data);
          this.uploading = false;
          this.dialogVisible = false;
        } catch (error) {
          this.uploading = false;
        }
      }
    },
    // 撤销签名
    undo() 
    {
      this.$refs.signaturePad.undoSignature();
    },
    // 清除签名
    clear() 
    {
      this.$refs.signaturePad.clearSignature();
    },
    // 锁定签名画布
    lock() 
    {
      this.isLock = true;
      this.$refs.signaturePad.lockSignaturePad();
    },
    // 解锁签名画布
    unlock() 
    {
      this.$refs.signaturePad.openSignaturePad();
      this.isLock = false;
    },
    // 清除缓存的背景图片
    clearCacheImages() 
    {
      this.$refs.signaturePad.clearCacheImages();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: calc(60vw + 40px);
}

.upload-image{
  width: max-content;
  margin: 0 10px;
}

.dialog-footer{
  display: flex;
  justify-content: flex-end;
}

.signaturepad-dialog ::v-deep .el-dialog__body {
  width: 100%;
  min-height: 200px;
  position: relative;
  padding: 5px 20px 20px 20px;
  box-sizing: border-box;
}

.signaturepad-dialog {
  .dialog-content {
    .tool-btns {
    }
  }
}
</style>